<template>
  <div>
    <van-nav-bar :title="title" />

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ArticleItem
        v-for="item in articleList"
        :key="item.id"
        :article="item"
      ></ArticleItem>
    </van-list>
  </div>
</template>

<script>
import { getLikeOrCollectList } from "../api/article";
export default {
  props: {
    title: String,
    optType: Number,
  },
  data() {
    return {
      loading: false,
      finished: false,
      articleList: [],
      currentPage: 1,
    };
  },
  created() {
    this.loading = true;
    this.loadList();
  },
  methods: {
    async loadList() {
      const list = await getLikeOrCollectList(this.currentPage, this.optType);
      if (this.currentPage === 1) {
        this.articleList = list.data.data.rows;
      } else {
        this.articleList = [...this.articleList, ...list.data.data.rows];
      }
      // 判单没有更多数据了、当前页 === 总页数
      this.finished = this.currentPage >= list.data.data.pageTotal;
      // 加载状态结束
      this.loading = false;
    },

    onLoad() {
      this.currentPage++;
      this.loadList();
    },
  },
};
</script>

<style></style>
